<!doctype html>
<html lang="ch">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>后台管理</title>
    <link href="css/bootstrap-table.min.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script src="js/bootstrap-table.js"></script>
    <script src="js/bootstrap-table-zh-CN.js"></script>
    <script src="js/bootstrap-table-export.js"></script>
    <script src="js/bootstrap-table-editable.js"></script>


    <script>
        $(function () {
            $(".meun-item").click(function () {
                $(".meun-item").removeClass("meun-item-active");
                $(this).addClass("meun-item-active");
                var itmeObj = $(".meun-item").find("img");
                itmeObj.each(function () {
                    var items = $(this).attr("src");
                    items = items.replace("_grey.png", ".png");
                    items = items.replace(".png", "_grey.png")
                    $(this).attr("src", items);
                });
                var attrObj = $(this).find("img").attr("src");

                attrObj = attrObj.replace("_grey.png", ".png");
                $(this).find("img").attr("src", attrObj);
            });

            $(".toggle-btn").click(function () {
                $("#leftMeun").toggleClass("show");
                $("#rightContent").toggleClass("pd0px");
            })
            //获取登录用户
            $.ajax({
                url: "/UserName",
                type: "post",
                dataType: "text",
                data: "",
                success: function (data) {
                    if (data=="no")
                        location.href = "/login.html";
                    else
                    $("#userName").text(data);

                },
                error: function (data) {
                    alert("发生错误:" + data.status);
                    location.href = "/login.html";
                }
            });

            //绑定类别信息
            $.ajax({
                url: "/SelectCategoryTableAll",
                type: "post",
                dataType: "json",
                data: "",
                success: function (data) {
                    var addcategory = $("#Addcategory");
                    addcategory.append("<option value='-1'>--请选择--</option>");
                    var result = eval(data);
                    //循环遍历 下拉框绑定
                    $(result).each(function (key) {
                        //第一种方法
                        var opt = $("<option></option>").text(result[key].categoryname).val(result[key].id);
                        addcategory.append(opt);
                    });

                },
                error: function (data) {
                    alert("错误" + data.status)
                }
            });

            //绑定日志table表数据
            $("#loadLog").click(function () {
                //先销毁表格
                $("#JournalTable").bootstrapTable('destroy');
                $("#JournalTable").bootstrapTable({
                    url: '/QueryAllLogsServlet',//请求后台的URL（*）
                    method: 'post',//请求方式（*）
                    toolbar: '#toolbar',//工具按钮用哪个容器
                    striped: true,//是否显示行间隔色
                    cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true,//是否显示分页（*）
                    sortable: false,//是否启用排序
                    sortOrder: "asc",//排序方式
                    // queryParams: oTableInit.queryParams,//传递参数（*）
                    sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1,//初始化加载第一页，默认第一页
                    pageSize: 10,//每页的记录行数（*）
                    pageList: [5, 15, 25, 50],//可供选择的每页的行数（*）
                    // search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                    contentType: "application/x-www-form-urlencoded",
                    strictSearch: true,
                    showColumns: true,//是否显示所有的列
                    showRefresh: true,//是否显示刷新按钮
                    minimumCountColumns: 2,//最少允许的列数
                    clickToSelect: true,//是否启用点击选中行
                    height: 700,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "id",//每一行的唯一标识，一般为主键列
                    showToggle: true,//是否显示详细视图和列表视图的切换按钮
                    cardView: false,//是否显示详细视图
                    detailView: false,//是否显示父子表
                    columns: [{
                        checkbox: true,  //在所有列之前显示一个checkbox
                        showToolbar: true,
                    }, {
                        field: 'id',
                        title: 'id',
                        align: 'center',
                    }, {
                        field: 'title',
                        title: '标题',
                        align: 'center',
                    }, {
                        field: 'username',
                        title: '作者',
                        align: 'center',
                    }, {
                        field: 'categoryname',
                        title: '类别',
                        align: 'center',
                    }, {
                        field: 'content',
                        title: '内容',
                        align: 'center',
                        cellStyle: formatTableUnit,
                        formatter: paramsMatter
                    }, {
                        field: "time",
                        title: "发表时间",
                        //获取日期列的值进行转换
                        formatter: function (value, row, index) {
                            return changeDateFormat(value)
                        }
                    }, {
                        field: 'hits',
                        title: '点击量',
                        align: 'center',
                    }, {
                        field: 'commentolume',
                        title: '评论量',
                        align: 'center',
                    }, {
                        field: "Button",
                        title: "操作",
                        align: 'center',
                        events: operateEvents,//给按钮注册事件
                        formatter: AddFunctionAlty//表格中增加按钮
                    }]
                });
            });

            //转换日期格式(时间戳转换为datetime格式)
            function changeDateFormat(cellval) {
                var dateVal = cellval + "";
                if (cellval != null) {
                    var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
                    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                    var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                    return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
                }
            };

            //添加日志表内按钮
            function AddFunctionAlty(values, row, index) {
                return [
                    '<button id="TableEditor" type="button" class="btn btn-info"  data-toggle="modal" data-target="#UpdateJournalSource">编辑</button>&nbsp;&nbsp;',
                    '<button id="TableDelete" type="button" class="btn btn-danger">删除</button>'
                ].join("")
            }

            //添加用户表内按钮
            function AddUserFunctionAlty(values, row, index) {
                return [
                    '<button id="UserTableDelete" type="button" class="btn btn-danger">删除</button>'
                ].join("")
            };

            //添加留言表内按钮
            function AddLeavingamessageFunctionAlty(values, row, index) {
                return [
                    '<button id="LeavingamessageTableDelete" type="button" class="btn btn-danger">删除</button>'
                ].join("")
            };

            //注册表内按钮事件
            window.operateEvents = {
                //日志表修改事件
                "click #TableEditor": function (e, values, row, index) {
                    //绑定修改下拉框类别
                    $.ajax({
                        url: "/SelectCategoryTableAll",
                        type: "post",
                        dataType: "json",
                        data: "",
                        success: function (data) {
                            var addcategory = $("#Updatecategory");
                            $("#Updatecategory").find("option").remove();
                            var result = eval(data);
                            //循环遍历 下拉框绑定
                            $(result).each(function (key) {
                                //第一种方法
                                var opt = $("<option></option>").text(result[key].categoryname).val(result[key].id);
                                addcategory.append(opt);
                            });
                        },
                        error: function (data) {
                            alert("错误" + data.status)
                        }
                    })
                    //修改
                    $.ajax({
                        url: "/QueryJournalId",
                        type: "post",
                        dataType: "json",
                        data: {id: row.id},
                        success: function (data) {
                            $("#UpdateTitle").val(data.title);
                            $("#Updatecontent").text(data.content);
                           $("#Updatecategory").val(data.category);
                            //$('#Updatecategory').attr('value',data.category);
                        },
                        error: function (data) {
                            alert("错误" + data.status);
                        }
                    })
                },
                //日志表删除事件
                "click #TableDelete": function (e, values, row, index) {
                    //alert(row.id);
                    if (!confirm("确认删除？")) return;
                    //删除
                    $.ajax({
                        url: "/DeleteJournal",
                        type: "post",
                        dataType: "text",
                        data: {id: row.id},
                        success: function (data) {
                            if (data == "ok") {
                                alert("删除成功");
                                $("#loadLog").trigger('click');
                            } else {
                                alert("删除失败");
                            }
                        },
                        error: function (data) {
                            alert("错误" + data.status);
                        }
                    })
                },
                //用户表删除事件
                "click #UserTableDelete": function (e, values, row, index) {
                    //alert(row.id);
                    if (!confirm("确认删除？")) return;
                    //删除
                    $.ajax({
                        url: "/DeleteUser",
                        type: "post",
                        dataType: "text",
                        data: {id: row.id},
                        success: function (data) {
                            if (data == "ok") {
                                alert("删除成功");
                                $("#LoadUser").trigger('click');
                            } else {
                                alert("删除失败");
                            }
                        },
                        error: function (data) {
                            alert("错误" + data.status);
                        }
                    })
                },
                //留言表删除事件
                "click #LeavingamessageTableDelete": function (e, values, row, index) {
                    //alert(row.id);
                    if (!confirm("确认删除？")) return;
                    //删除
                    $.ajax({
                        url: "/DeleteLeavingamessage",
                        type: "post",
                        dataType: "text",
                        data: {id: row.id},
                        success: function (data) {
                            if (data == "ok") {
                                alert("删除成功");
                                $("#LoadLeavingamessage").trigger('click');
                            } else {
                                alert("删除失败");
                            }
                        },
                        error: function (data) {
                            alert("错误" + data.status);
                        }
                    })
                }


            };

            //表格超出宽度鼠标悬停显示td内容
            function paramsMatter(value, row, index) {
                var span = document.createElement("span");
                span.setAttribute("title", value);
                span.innerHTML = value;
                return span.outerHTML;
            };

            //td宽度以及内容超过宽度隐藏
            function formatTableUnit(value, row, index) {
                return {
                    css: {
                        "white-space": "nowrap",
                        "text-overflow": "ellipsis",
                        "overflow": "hidden",
                        "max-width": "150px"
                    }
                }
            };
            //退出登录
            $("#logout").click(function () {
                $.ajax({
                    url: "/LogOutServlet",
                    type: "post",
                    dataType: "text",
                    data: "",
                    success: function (data) {
                        if (data == "ok") {
                            location.href = "/login.html";
                        }
                    },
                    error: function (data) {
                        alert("发生错误:" + data.status);
                    }
                })
            });
            // 添加日志
            $("#SaveJournal").click(function () {
                // alert($("#Addcontent").val());
                $.ajax({
                    url: "/AddJournal",
                    type: "get",
                    dataType: "text",
                    data: {
                        title: $("#AddTitle").val(),
                        content: $("#Addcontent").val(),
                        category:$("#Addcategory").find("option:selected").val()
                    },
                    success: function (data) {
                        if (data == "ok") {
                            alert("添加成功");
                            $("#AddTitle").val("");
                            $("#Addcontent").val("");
                            $("#addJournalSource").modal('hide');
                            $("#loadLog").trigger('click');
                        } else {
                            alert("添加失败")
                            $("#AddTitle").val("");
                            $("#Addcontent").val("");
                        }
                    },
                    error: function (data) {
                        alert("错误" + data.status);
                    }
                });
            });
            //修改日志
            $("#updateSaveJournal").click(function () {
                $.ajax({
                    url: "/UpdateJournal",
                    type: "get",
                    dataType: "text",
                    data: {
                        title: $("#UpdateTitle").val(),
                        content: $("#Updatecontent").val(),
                        category:$("#Updatecategory").find("option:selected").val()
                    },
                    success: function (data) {
                        if (data == "ok") {
                            alert("修改成功");
                            $("#UpdateTitle").val("");
                            $("#Updatecontent").val("");
                            $("#UpdateJournalSource").modal('hide');
                            $("#loadLog").trigger('click');
                        } else {
                            alert("修改失败")
                            $("#UpdateTitle").val("");
                            $("#Updatecontent").val("");
                        }
                    },
                    error: function (data) {
                        alert("错误" + data.status);
                    }
                });


            });
            //模糊搜索日志
            $("#SelectJournal").click(function () {
                //  alert($("#Likecontent").val());
                $.ajax({
                    url: "/LikeJournal",
                    type: "get",
                    dataType: "json",
                    data: {content: $("#Likecontent").val()},
                    success: function (data) {
                        //先销毁表格
                        $("#JournalTable").bootstrapTable('destroy');
                        $("#JournalTable").bootstrapTable({
                            //url: '/QueryAllLogsServlet',//请求后台的URL（*）
                            //method: 'post',//请求方式（*）
                            data: data,
                            toolbar: '#toolbar',//工具按钮用哪个容器
                            striped: true,//是否显示行间隔色
                            cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                            pagination: true,//是否显示分页（*）
                            sortable: false,//是否启用排序
                            sortOrder: "asc",//排序方式
                            // queryParams: oTableInit.queryParams,//传递参数（*）
                            sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
                            pageNumber: 1,//初始化加载第一页，默认第一页
                            pageSize: 10,//每页的记录行数（*）
                            pageList: [5, 15, 25, 50],//可供选择的每页的行数（*）
                            // search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                            contentType: "application/x-www-form-urlencoded",
                            strictSearch: true,
                            showColumns: true,//是否显示所有的列
                            showRefresh: true,//是否显示刷新按钮
                            minimumCountColumns: 2,//最少允许的列数
                            clickToSelect: true,//是否启用点击选中行
                            height: 700,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                            uniqueId: "id",//每一行的唯一标识，一般为主键列
                            showToggle: true,//是否显示详细视图和列表视图的切换按钮
                            cardView: false,//是否显示详细视图
                            detailView: false,//是否显示父子表
                            columns: [{
                                checkbox: true,  //在所有列之前显示一个checkbox
                                showToolbar: true,
                            }, {
                                field: 'id',
                                title: 'id',
                                align: 'center',
                            }, {
                                field: 'title',
                                title: '标题',
                                align: 'center',
                            }, {
                                field: 'username',
                                title: '作者',
                                align: 'center',
                            }, {
                                field: 'categoryname',
                                title: '类别',
                                align: 'center',
                            }, {
                                field: 'content',
                                title: '内容',
                                align: 'center',
                                cellStyle: formatTableUnit,
                                formatter: paramsMatter
                            }, {
                                field: "time",
                                title: "发表时间",
                                //获取日期列的值进行转换
                                formatter: function (value, row, index) {
                                    return changeDateFormat(value)
                                }
                            }, {
                                field: 'hits',
                                title: '点击量',
                                align: 'center',
                            }, {
                                field: 'commentolume',
                                title: '评论量',
                                align: 'center',
                            }, {
                                field: "Button",
                                title: "操作",
                                align: 'center',
                                events: operateEvents,//给按钮注册事件
                                formatter: AddFunctionAlty//表格中增加按钮
                            }]
                        });
                    },
                    error: function (data) {
                        alert("错误" + data.status);
                    }
                })
            });
            //查询用户信息
            $("#LoadUser").click(function () {
                //先销毁表格
                $("#userTable").bootstrapTable('destroy');
                $("#userTable").bootstrapTable({
                    url: '/SelectUserAll',//请求后台的URL（*）
                    method: 'post',//请求方式（*）
                    toolbar: '#toolbar',//工具按钮用哪个容器
                    striped: true,//是否显示行间隔色
                    cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true,//是否显示分页（*）
                    sortable: false,//是否启用排序
                    sortOrder: "asc",//排序方式
                    // queryParams: oTableInit.queryParams,//传递参数（*）
                    sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1,//初始化加载第一页，默认第一页
                    pageSize: 10,//每页的记录行数（*）
                    pageList: [5, 15, 25, 50],//可供选择的每页的行数（*）
                    // search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                    contentType: "application/x-www-form-urlencoded",
                    strictSearch: true,
                    showColumns: true,//是否显示所有的列
                    showRefresh: true,//是否显示刷新按钮
                    minimumCountColumns: 2,//最少允许的列数
                    clickToSelect: true,//是否启用点击选中行
                    height: 700,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "id",//每一行的唯一标识，一般为主键列
                    showToggle: true,//是否显示详细视图和列表视图的切换按钮
                    cardView: false,//是否显示详细视图
                    detailView: false,//是否显示父子表
                    columns: [{
                        checkbox: true,  //在所有列之前显示一个checkbox
                        showToolbar: true,
                    }, {
                        field: 'id',
                        title: 'id',
                        align: 'center',
                    }, {
                        field: 'username',
                        title: '用户名',
                        align: 'center',
                    }, {
                        field: 'name',
                        title: '昵称',
                        align: 'center',
                    }, {
                        field: 'sex',
                        title: '性别',
                        align: 'center',
                        formatter: function (value, rec, index) {
                            return value == 1 ? "男" : value == 0 ? "女" : "";
                        }
                    }, {
                        field: 'email',
                        title: '邮箱',
                        align: 'center'
                    }, {
                        field: "address",
                        title: "地址",
                        align: 'center'
                    }, {
                        field: "occupation",
                        title: "职业",
                        align: 'center'
                    }, {
                        field: "telephone",
                        title: "电话",
                        align: 'center'
                    }, {
                        field: "Button",
                        title: "操作",
                        align: 'center',
                        events: operateEvents,//给按钮注册事件
                        formatter: AddUserFunctionAlty//表格中增加按钮
                    }]
                });
            });
            //模糊查询用户名
            $("#SelectUser").click(function () {
                // alert($("#SelectuserName").val());
                $.ajax({
                    url: "/SelectUserNameLike",
                    type: "get",
                    dataType: "json",
                    data: {username: $("#SelectuserName").val()},
                    success: function (data) {
                        //先销毁表格
                        $("#userTable").bootstrapTable('destroy');
                        $("#userTable").bootstrapTable({
                            //url: '/QueryAllLogsServlet',//请求后台的URL（*）
                            //method: 'post',//请求方式（*）
                            data: data,
                            toolbar: '#toolbar',//工具按钮用哪个容器
                            striped: true,//是否显示行间隔色
                            cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                            pagination: true,//是否显示分页（*）
                            sortable: false,//是否启用排序
                            sortOrder: "asc",//排序方式
                            // queryParams: oTableInit.queryParams,//传递参数（*）
                            sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
                            pageNumber: 1,//初始化加载第一页，默认第一页
                            pageSize: 10,//每页的记录行数（*）
                            pageList: [5, 15, 25, 50],//可供选择的每页的行数（*）
                            // search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                            contentType: "application/x-www-form-urlencoded",
                            strictSearch: true,
                            showColumns: true,//是否显示所有的列
                            showRefresh: true,//是否显示刷新按钮
                            minimumCountColumns: 2,//最少允许的列数
                            clickToSelect: true,//是否启用点击选中行
                            height: 700,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                            uniqueId: "id",//每一行的唯一标识，一般为主键列
                            showToggle: true,//是否显示详细视图和列表视图的切换按钮
                            cardView: false,//是否显示详细视图
                            detailView: false,//是否显示父子表
                            columns: [{
                                checkbox: true,  //在所有列之前显示一个checkbox
                                showToolbar: true,
                            }, {
                                field: 'id',
                                title: 'id',
                                align: 'center',
                            }, {
                                field: 'username',
                                title: '用户名',
                                align: 'center',
                            }, {
                                field: 'name',
                                title: '昵称',
                                align: 'center',
                            }, {
                                field: 'sex',
                                title: '性别',
                                align: 'center',
                                formatter: function (value, rec, index) {
                                    return value == 1 ? "男" : value == 0 ? "女" : "";
                                }
                            }, {
                                field: 'email',
                                title: '邮箱',
                                align: 'center'
                            }, {
                                field: "address",
                                title: "地址",
                                align: 'center'
                            }, {
                                field: "occupation",
                                title: "职业",
                                align: 'center'
                            }, {
                                field: "telephone",
                                title: "电话",
                                align: 'center'
                            }, {
                                field: "Button",
                                title: "操作",
                                align: 'center',
                                events: operateEvents,//给按钮注册事件
                                formatter: AddUserFunctionAlty//表格中增加按钮
                            }]
                        });
                    },
                    error: function (data) {
                        alert("错误" + data.status);
                    }
                })
            });
            //判断密码是否一致
            $("#RepeatPassword").blur(function () {
                var NewPassword = $("#NewPassword").val();
                var RepeatPassword = $("#RepeatPassword").val();
                if (NewPassword != "" && NewPassword != null) {
                    if (NewPassword == RepeatPassword) {
                        $("#Isconpass").text("");
                    } else {
                        $("#Isconpass").text("两次密码不一致");
                    }
                }
            });
            //保存修改密码
            $("#saveUserPassword").click(function () {
                // alert($("#OriginalPassword").val());
                // alert($("#NewPassword").val());
                if ($("#OriginalPassword").val() != "" && $("#NewPassword").val() != "" && $("#RepeatPassword").val() != "") {
                    $.ajax({
                        url: "/UpdateUserPassword",
                        type: "post",
                        dataType: "text",
                        data: {
                            OriginalPassword: $("#OriginalPassword").val(),
                            NewPassword: $("#NewPassword").val()
                        },
                        success: function (data) {
                            if (data == "ok") {
                                alert("修改成功，请重新登录");
                                location.href = "/login.html";

                            } else {
                                $("#Isconpass").text(data.toString());
                            }
                        },
                        error: function (data) {
                            alert("错误" + data.status);
                        }

                    })

                }
            });
            //绑定留言信息
            $("#LoadLeavingamessage").click(function () {
                //LeavingamessageTable
                // alert("12");
                //先销毁表格
                $("#LeavingamessageTable").bootstrapTable('destroy');
                $("#LeavingamessageTable").bootstrapTable({
                    url: '/SelectLeavingamessageAll',//请求后台的URL（*）
                    method: 'post',//请求方式（*）
                    toolbar: '#toolbar',//工具按钮用哪个容器
                    striped: true,//是否显示行间隔色
                    cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true,//是否显示分页（*）
                    sortable: false,//是否启用排序
                    sortOrder: "asc",//排序方式
                    // queryParams: oTableInit.queryParams,//传递参数（*）
                    sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1,//初始化加载第一页，默认第一页
                    pageSize: 10,//每页的记录行数（*）
                    pageList: [5, 15, 25, 50],//可供选择的每页的行数（*）
                    // search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                    contentType: "application/x-www-form-urlencoded",
                    strictSearch: true,
                    showColumns: true,//是否显示所有的列
                    showRefresh: true,//是否显示刷新按钮
                    minimumCountColumns: 2,//最少允许的列数
                    clickToSelect: true,//是否启用点击选中行
                    height: 700,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "id",//每一行的唯一标识，一般为主键列
                    showToggle: true,//是否显示详细视图和列表视图的切换按钮
                    cardView: false,//是否显示详细视图
                    detailView: false,//是否显示父子表
                    columns: [{
                        checkbox: true,  //在所有列之前显示一个checkbox
                        showToolbar: true,
                    }, {
                        field: 'id',
                        title: 'id',
                        align: 'center',
                    }, {
                        field: 'username',
                        title: '用户名',
                        align: 'center',
                    }, {
                        field: 'email',
                        title: '邮箱',
                        align: 'center'
                    }, {
                        field: "content",
                        title: "内容",

                    }, {
                        field: "time",
                        title: "发表留言时间",
                        //获取日期列的值进行转换
                        formatter: function (value, row, index) {
                            return changeDateFormat(value)
                        }
                    }, {
                        field: "Button",
                        title: "操作",
                        align: 'center',
                        events: operateEvents,//给按钮注册事件
                        formatter: AddLeavingamessageFunctionAlty//表格中增加按钮
                    }]
                });
            });
            //模糊查询留言信息
            $("#SelectLeavingamessage").click(function () {
                //alert($("#LeavingamessageLike").val());
                $.ajax({
                    url: "/SelectLeavingamessageLike",
                    type: "get",
                    dataType: "json",
                    data: {like: $("#LeavingamessageLike").val()},
                    success: function (data) {
                        //先销毁表格
                        $("#LeavingamessageTable").bootstrapTable('destroy');
                        $("#LeavingamessageTable").bootstrapTable({
                            //url: '/QueryAllLogsServlet',//请求后台的URL（*）
                            //method: 'post',//请求方式（*）
                            data: data,
                            toolbar: '#toolbar',//工具按钮用哪个容器
                            striped: true,//是否显示行间隔色
                            cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                            pagination: true,//是否显示分页（*）
                            sortable: false,//是否启用排序
                            sortOrder: "asc",//排序方式
                            // queryParams: oTableInit.queryParams,//传递参数（*）
                            sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
                            pageNumber: 1,//初始化加载第一页，默认第一页
                            pageSize: 10,//每页的记录行数（*）
                            pageList: [5, 15, 25, 50],//可供选择的每页的行数（*）
                            // search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                            contentType: "application/x-www-form-urlencoded",
                            strictSearch: true,
                            showColumns: true,//是否显示所有的列
                            showRefresh: true,//是否显示刷新按钮
                            minimumCountColumns: 2,//最少允许的列数
                            clickToSelect: true,//是否启用点击选中行
                            height: 700,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                            uniqueId: "id",//每一行的唯一标识，一般为主键列
                            showToggle: true,//是否显示详细视图和列表视图的切换按钮
                            cardView: false,//是否显示详细视图
                            detailView: false,//是否显示父子表
                            columns: [{
                                checkbox: true,  //在所有列之前显示一个checkbox
                                showToolbar: true,
                            }, {
                                field: 'id',
                                title: 'id',
                                align: 'center',
                            }, {
                                field: 'username',
                                title: '用户名',
                                align: 'center',
                            }, {
                                field: 'email',
                                title: '邮箱',
                                align: 'center'
                            }, {
                                field: "content",
                                title: "内容",

                            }, {
                                field: "time",
                                title: "发表留言时间",
                                //获取日期列的值进行转换
                                formatter: function (value, row, index) {
                                    return changeDateFormat(value)
                                }
                            }, {
                                field: "Button",
                                title: "操作",
                                align: 'center',
                                events: operateEvents,//给按钮注册事件
                                formatter: AddLeavingamessageFunctionAlty//表格中增加按钮
                            }]
                        });
                    },
                    error: function (data) {
                        alert("错误" + data.status);
                    }
                })

            });


        })


    </script>
    <!--[if lt IE 9]>
    <!--<script src="js/html5shiv.min.js"></script>-->
    <!--<script src="js/respond.min.js"></script>-->
    <![endif]-->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/slide.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link href="https://cdn.bootcdn.net/ajax/libs/flat-ui/2.3.0/css/flat-ui.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/noUiSlider/14.6.2/nouislider.css" rel="stylesheet">
</head>

<body>
<div id="wrap">
    <!-- 左侧菜单栏目块 -->
    <div class="leftMeun" id="leftMeun">
        <div id="logoDiv">
            <p id="logoP"><img id="logo" alt="后台管理" src="images/logo.png"><span>后台管理</span></p>
        </div>
        <div id="personInfor">
            <p id="userName">XXX</p>
            <p>
                <a id="logout">退出登录</a>
            </p>
        </div>
        <div class="meun-title">账号管理</div>
        <div class="meun-item meun-item-active" href="#sour" aria-controls="sour" role="tab" data-toggle="tab"
             id="loadLog"><img
                src="images/icon_source.png">日志管理
        </div>
        <div class="meun-item" href="#user" aria-controls="user" role="tab" data-toggle="tab" id="LoadUser"><img
                src="images/icon_user_grey.png">用户管理
        </div>
        <div class="meun-item" href="#chan" aria-controls="chan" role="tab" data-toggle="tab"><img
                src="images/icon_change_grey.png">修改密码
        </div>
        <div class="meun-title">评论管理</div>
        <div class="meun-item" href="#scho" aria-controls="scho" role="tab" data-toggle="tab" id="LoadLeavingamessage">
            <img
                    src="images/icon_house_grey.png">留言管理
        </div>
        <div class="meun-item" href="#regu" aria-controls="regu" role="tab" data-toggle="tab"><img
                src="images/icon_rule_grey.png">规则管理
        </div>
        <div class="meun-item" href="#stud" aria-controls="stud" role="tab" data-toggle="tab"><img
                src="images/icon_card_grey.png">人员信息
        </div>
        <div class="meun-item" href="#sitt" aria-controls="sitt" role="tab" data-toggle="tab"><img
                src="images/icon_char_grey.png">座位管理
        </div>
    </div>
    <!-- 右侧具体内容栏目 -->
    <div id="rightContent">
        <a class="toggle-btn" id="nimei">
            <i class="glyphicon glyphicon-align-justify"></i>
        </a>
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- 日志管理模块 -->
            <div role="tabpanel" class="tab-pane active" id="sour">
                <div class="check-div form-inline ">
                    <button class="btn btn-yellow btn-xs" data-toggle="modal" data-target="#addJournalSource">添加日志
                    </button>
                    <div class="col-xs-4">
                        <input type="text" class="form-control input-sm" id="Likecontent" placeholder="标题、内容">
                        <button class="btn btn-white btn-xs " id="SelectJournal">查 询</button>
                    </div>
                </div>
                <div class="data-div table-responsive">
                    <!--数据表-->
                    <table id="JournalTable" class="table table-striped table-bordered table-hover"></table>

                </div>
                <!--弹出窗口 添加日志-->
                <div class="modal fade" id="addJournalSource" role="dialog" aria-labelledby="AddJournal">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="AddJournal">添加日志</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <form class="form-horizontal">
                                        <div class="form-group ">
                                            <label for="AddTitle" class="col-xs-3 control-label">标题：</label>
                                            <div class="col-xs-8 ">
                                                <input type="text" class="form-control input-sm duiqi" id="AddTitle"
                                                       placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="Addcategory" class="col-xs-3 control-label">类别：</label>
                                            <div class="col-xs-8 ">
                                                <select class="form-control duiqi" id="Addcategory">
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="Addcontent" class="col-xs-3 control-label">内容：</label>
                                            <div class="col-xs-8 ">
                                                <textarea class="form-control duiqi" name="deblock_udid" rows="16"
                                                          id="Addcontent" style="min-width: 90%"></textarea>
                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-xs btn-xs btn-white" data-dismiss="modal">取 消
                                </button>
                                <button type="button" id="SaveJournal" class="btn btn-xs btn-xs btn-green">保 存</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->

                <!--修改日志弹出窗口-->
                <div class="modal fade" id="UpdateJournalSource" role="dialog" aria-labelledby="UpdateJournal">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="UpdateJournal">修改日志</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <form class="form-horizontal">
                                        <div class="form-group ">
                                            <label for="UpdateTitle" class="col-xs-3 control-label">标题：</label>
                                            <div class="col-xs-8 ">
                                                <input type="text" class="form-control input-sm duiqi" id="UpdateTitle"
                                                       placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="Updatecategory" class="col-xs-3 control-label">类别：</label>
                                            <div class="col-xs-8 ">
                                                <select class="form-control duiqi" id="Updatecategory">
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="Updatecontent" class="col-xs-3 control-label">内容：</label>
                                            <div class="col-xs-8 ">
                                                <textarea class="form-control duiqi" name="deblock_udid" rows="16"
                                                          id="Updatecontent" style="min-width: 90%"></textarea>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                <button type="button" class="btn btn-xs btn-green" id="updateSaveJournal">保 存</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->
            </div>

            <!--用户管理模块-->
            <div role="tabpanel" class="tab-pane" id="user">
                <div class="check-div form-inline">

                    <div class="col-xs-4">
                        <input type="text" class="form-control input-sm" placeholder="输入文字搜索" id="SelectuserName">
                        <button class="btn btn-white btn-xs " id="SelectUser"> 查 询</button>
                    </div>
                </div>
                <div class="data-div table-responsive">
                    <!--数据表-->
                    <table id="userTable" class="table table-striped table-bordered table-hover"></table>
                </div>
            </div>
            <!-- 修改密码模块 -->
            <div role="tabpanel" class="tab-pane" id="chan">
                <div class="check-div">
                    原始密码为123456
                </div>
                <div style="padding: 50px 0;margin-top: 50px;background-color: #fff; text-align: right;width: 420px;margin: 50px auto;">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="OriginalPassword" class="col-xs-4 control-label">原密码：</label>
                            <div class="col-xs-5">
                                <input type="password" class="form-control input-sm duiqi" id="OriginalPassword"
                                       placeholder=""
                                       style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="NewPassword" class="col-xs-4 control-label">新密码：</label>
                            <div class="col-xs-5">
                                <input type="password" class="form-control input-sm duiqi" id="NewPassword"
                                       placeholder=""
                                       style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="RepeatPassword" class="col-xs-4 control-label">重复密码：</label>
                            <div class="col-xs-5">
                                <input type="password" class="form-control input-sm duiqi" id="RepeatPassword"
                                       placeholder=""
                                       style="margin-top: 7px;">
                                <span id="Isconpass" style="color: red"></span>
                            </div>
                        </div>
                        <div class="form-group text-right">
                            <div class="col-xs-offset-4 col-xs-5" style="margin-left: 169px;">
                                <button type="reset" class="btn btn-xs btn-white">取 消</button>
                                <button type="button" class="btn btn-xs btn-green" id="saveUserPassword">保存</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
            <!--留言管理模块-->
            <div role="tabpanel" class="tab-pane" id="scho">
                <div class="check-div form-inline">
                    <div class="col-lg-4 col-xs-5">
                        <input type="text" class=" form-control input-sm " placeholder="输入文字搜索"
                               id="LeavingamessageLike">
                        <button class="btn btn-white btn-xs " id="SelectLeavingamessage">查 询</button>
                    </div>
                </div>
                <div class="data-div">
                    <!--留言数据表-->
                    <table id="LeavingamessageTable" class="table table-striped table-bordered table-hover"></table>
                </div>
            </div>


        </div>
    </div>
</div>
<!-- 滑块js -->
<!--	<script type="text/javascript">
        scale = function(btn, bar, title, unit) {
                this.btn = document.getElementById(btn);
                this.bar = document.getElementById(bar);
                this.title = document.getElementById(title);
                this.step = this.bar.getElementsByTagName("div")[0];
                this.unit = unit;
                this.init();
        };
        scale.prototype = {
                init: function() {
                        var f = this,
                                g = document,
                                b = window,
                                m = Math;
                        f.btn.onmousedown = function(e) {
                                var x = (e || b.event).clientX;
                                var l = this.offsetLeft;
//						var max = f.bar.offsetWidth - this.offsetWidth;
                                var max = f.bar.offsetWidth-20 ;
                                g.onmousemove = function(e) {
                                        var thisX = (e || b.event).clientX;
                                        var to = m.min(max, m.max(-2, l + (thisX - x)));
                                        f.btn.style.left = to+ 'px';
                                        f.ondrag(m.round(m.max(0, to / max) * 100), to);
                                        b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
                                };
                                g.onmouseup = new Function('this.onmousemove=null');
                        };
                },
                ondrag: function(pos, x) {
                        this.step.style.width = Math.max(0, x) +2+ 'px';
                        this.title.innerHTML = pos / 10 + this.unit + "";
                }
        }
        new scale('btn0', 'bar0', 'title0', "分钟");
        new scale('btn1', 'bar1', 'title1', "分钟");
        new scale('btn2', 'bar2', 'title2', "天");
        new scale('btn3', 'bar3', 'title3', "次");
</script>
-->
<script src="https://cdn.bootcdn.net/ajax/libs/noUiSlider/14.6.2/nouislider.js"></script>


<!-- this page specific inline scripts -->
<script>
    //min/max slider
    function huadong(my, unit, def, max) {
        $(my).noUiSlider({
            range: [0, max],
            start: [def],
            handles: 1,
            connect: 'upper',
            slide: function () {
                var val = Math.floor($(this).val());
                $(this).find(".noUi-handle").text(
                    val + unit
                );
                console.log($(this).find(".noUi-handle").parent().parent().html());
            },
            set: function () {
                var val = Math.floor($(this).val());
                $(this).find(".noUi-handle").text(
                    val + unit
                );
            }
        });
        $(my).val(def, true);
    }

    huadong('.slider-minmax1', "分钟", "5", 30);
    huadong('.slider-minmax2', "分钟", "6", 15);
    huadong('.slider-minmax3', "分钟", "10", 60);
    huadong('.slider-minmax4', "次", "2", 10);
    huadong('.slider-minmax5', "天", "3", 7);
    huadong('.slider-minmax6', "天", "8", 10);
</script>

</body>

</html>